<template>
  <!-- 印章授权 -->
  <view>
    <view class="slot-box">
      <view style="flex:2;margin-right: 10rpx;">
        <uni-search-bar
            v-model="queryParams.staffName"
            type="text"
            clearButton="auto"
            cancelButton="none"
            @confirm="handleQuery"
            @input="handleQuery"
            placeholder="请输入被授权人名称"/>
      </view>
      <button v-if="dataDetails.status == 1 " size="mini" class="search_btn" @click="addStaffSeal">新增授权</button>
    </view>
    <view v-if="!!dataList && dataList.length > 0">
      <uni-card :is-shadow="false" v-for="(item,index) in dataList" :key="index">
        <p class="grid-integral">授权人：{{ item.authName }}</p>
        <p class="grid-integral">被授权人：{{ item.staffName }}</p>
        <p class="grid-integral">授权有效期：
          <span v-if="item.isLong== 1">长期有效</span>
          <span v-else>{{ item.startDate }} 至 {{ item.endDate }}</span>
        </p>
        <p class="grid-integral">授权状态：
          <template v-for="(dictItem, index) in dicts.ec_seal_auth_status">
            <template v-if="item.status == dictItem.value">
              <uni-tag :text="dictItem.text" size="mini" :type="dictItem.type"/>
            </template>
          </template>
        </p>
        <view style="display: flex;justify-content: space-between;">
          <p class="grid-integral">授权时间：{{ item.updateTime }}</p>
          <button
              v-if="item.isSystem == 0"
              size="mini"
              @click="cancelAuthorization(item)"
              class="white_btn"
          >取消授权
          </button>
        </view>
      </uni-card>
    </view>
    <!-- 加载更多 -->
    <uni-load-more color="#00a660" :status="loadStatus"/>
    <!-- 新增授权 -->
    <detail-staff-seal-add ref="detailStaffSealAdd" :seal-id="sealId" @success="handleQuery"/>
  </view>
</template>

<script>
import {getDictsByNameForUni} from "@/utils/dicts";
import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';
import {listStaffSeal, updateStaffSealStatus} from "@/api/ec/console/seal/staffSeal";
import detailStaffSealAdd from './detailStaffSealAdd'

export default {
  name: 'detailStaffSeal',
  components: {luanqingEmpty, detailStaffSealAdd},
  props: {
    // 印章id
    sealId: {
      type: Number,
      default: 0,
    },
    dataDetails: {type: Object},
  },
  data() {
    return {
      // 数据字典
      dicts: {
        ec_seal_auth_status: [],
      },
      // 加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      loadStatus: 'loading',
      // 数据列表
      dataList: [],
      //总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sealId: null,
        staffName: undefined,
      },
    }
  },
  created() {
    this.getDicts();
  },
  methods: {
    /**加载数据字典*/
    getDicts() {
      this.dicts.ec_seal_auth_status = getDictsByNameForUni("ec_seal_auth_status");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList(true);
    },
    /**
     * 查询列表
     * @param reload true 重新加载数据； false 加载更多
     */
    getList(reload) {
      if (reload) {
        this.queryParams.pageNum = 1;
        this.loadStatus = 'more'
        this.$modal.loading();
      }
      this.queryParams.sealCompanyId = this.sealId;
      listStaffSeal(this.queryParams).then(response => {
        if (reload) {
          uni.hideLoading()
        }
        this.total = response.total;
        if (response.total > 0) {
          const dataRows = response.rows;
          this.dataList = reload ? dataRows : this.dataList.concat(dataRows);
        } else {
          this.dataList = [];
        }
        // 判断数据是否加载完全
        if (response.total <= this.dataList.length) {
          this.loadStatus = 'noMore'
        }
        // 页数+1
        this.queryParams.pageNum++
      }).catch(() => {
        if (reload) {
          uni.hideLoading()
        }
      });
    },
    /** 上拉刷新回调 */
    loadMore() {
      if (this.loadStatus != 'noMore' && this.total > this.dataList.length) {
        this.loadStatus = 'loading';
        // 延迟500毫秒显示loading效果
        setTimeout(() => {
          // 执行查询的方法
          this.getList(false);
        }, 500)
      } else {
        // 停止加载
        this.loadStatus = 'noMore'
      }
    },
    /** 取消授权 */
    cancelAuthorization(item) {
      let that = this
      uni.showModal({
        title: '系统提示',
        confirmColor: '#00a660',
        content: '您确认要取消该印章使用权限吗？印章使用权限取消后，授权对象将无法再使用该印章进行签署服务。',
        success: function (res) {
          if (res.confirm) {
            let id = item.id;
            const param = {id}
            updateStaffSealStatus(param).then(() => {
              that.$modal.msgSuccess("取消授权成功");
              that.handleQuery();
            });
          }
        }
      })
    },
    /** 新增授权 */
    addStaffSeal() {
      this.$refs.detailStaffSealAdd.toOpenDialog()
    }
  }
}
</script>

<style lang="scss" scoped>
.search_btn {
  margin-right: 0;
  background: #e6f6ef;
  color: $uni-color-primary;
  border: 1rpx solid #99dbbf;
  font-size: 24rpx;
  line-height: 60rpx;
  margin-left: 10rpx;
  flex: 0.5;
}
</style>